<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02-Form表单校验</title>
</head>
<script>
    window.onload = function () {
        // 用户名
        let username = document.frm.username;
        let b1;
        username.onblur = function () {
            b1 = checkUserName(username);
        }

        // 密码
        let psd = document.frm.psd;
        let b2;
        psd.onblur = function () {
            b2 = checkPassword(psd);
        }

        // 确认密码
        let rePsd = document.frm.rePsd;
        let b3;
        rePsd.onblur = function () {
            b3 = checkRePassword(rePsd);
        }

        // 真实姓名
        let realName = document.frm.realName;
        let b4;
        realName.onblur = function () {
            b4 = checkRealName(realName);
        }

        // 电子邮箱
        let email = document.frm.email;
        let b5;
        email.onblur = function () {
            b5 = checkEmail(email);
        }

        // 电话号码
        let phone = document.frm.phone;
        let b6;
        phone.onblur = function () {
            b6 = checkPhone(phone);
        }

        // 验证码
        randomCode();

        // 判断验证码
        let code = document.frm.code;
        let b7;
        code.onblur = function () {
            b7 = checkCode(code);
        }

        // 提交按钮事件
        document.getElementById("submitBtn").onclick = function () {
            // 判断是否勾选协议
            let isAgreeEle = document.getElementById("isAgree");
            if (!isAgreeEle.checked) {
                alert("请先勾选协议");
                return false;
            }
            if (b1 && b2 && b3 && b4 && b5 && b6 && b7) {
                alert("表单提交成功");
                return true;
            } else {
                alert("请检查输入内容是否合法");
                return false;
            }
        }
    }

    // 校验用户名
    function checkUserName(userName) {
        // 获取用户输入的用户名的值
        let userNameValue = userName.value;
        // 创建正则
        let regExp = new RegExp(/^[a-zA-Z]{6,10}$/);
        // 正则校验
        let flag = regExp.test(userNameValue);
        let usernameSpan = document.getElementById("usernameSpan");
        if (flag) {
            usernameSpan.innerHTML = "用户名格式正确";
            usernameSpan.style.color = "green";
        } else {
            usernameSpan.innerHTML = "用户名不格式正确";
            usernameSpan.style.color = "red";
        }
        return flag;
    }

    // 校验密码
    function checkPassword(password) {
        // 获取用户输入的密码的值
        let passwordValue = password.value;
        // 创建正则
        let regExp = new RegExp(/^\d{6,10}$/);
        // 正则校验
        let flag = regExp.test(passwordValue);
        let psdSpan = document.getElementById("psdSpan");
        if (flag) {
            psdSpan.innerHTML = "密码格式正确";
            psdSpan.style.color = "green";
        } else {
            psdSpan.innerHTML = "密码不格式正确";
            psdSpan.style.color = "red";
        }
        return flag;
    }

    // 确认密码
    function checkRePassword(password) {
        // 获取用户输入的密码的值
        let psdValue = document.frm.psd.value;
        let passwordValue = password.value;
        let rePsdSpan = document.getElementById("rePsdSpan");
        let flag = passwordValue == psdValue;
        if (flag) {
            rePsdSpan.innerHTML = "两次输入密码相同";
            rePsdSpan.style.color = "green";
        } else {
            rePsdSpan.innerHTML = "两次输入密码不相同";
            rePsdSpan.style.color = "red";
        }
        return flag;
    }

    // 真实姓名
    function checkRealName(realName) {
        let realNameValue = realName.value;
        // 创建正则
        let regExp = new RegExp(/^[\u4e00-\u9fa5]{2,6}$/);
        let flag = regExp.test(realNameValue);
        let realNameSpan = document.getElementById("realNameSpan");
        if (flag) {
            realNameSpan.innerHTML = "姓名格式正确";
            realNameSpan.style.color = "green";
        } else {
            realNameSpan.innerHTML = "姓名格式不正确";
            realNameSpan.style.color = "red";
        }
        return flag;
    }


    // 电子邮箱
    function checkEmail(email) {
        let emailValue = email.value;
        // 创建正则
        let regExp = new RegExp(/^[1-9][0-9]{4,}(@qq.com|[13|15|18]\d{9}@163.com)$/);
        let flag = regExp.test(emailValue);
        let emailSpan = document.getElementById("emailSpan");
        if (flag) {
            emailSpan.innerHTML = "电子邮箱格式正确";
            emailSpan.style.color = "green";
        } else {
            emailSpan.innerHTML = "电子邮箱格式不正确";
            emailSpan.style.color = "red";
        }
        return flag;
    }


    // 电话号码
    function checkPhone(phone) {
        let phoneValue = phone.value;
        // 创建正则
        let regExp = new RegExp(/^(13|15|18|19)\d{9}$/);
        let flag = regExp.test(phoneValue);
        let phoneSpan = document.getElementById("phoneSpan");
        if (flag) {
            phoneSpan.innerHTML = "电话号码格式正确";
            phoneSpan.style.color = "green";
        } else {
            phoneSpan.innerHTML = "电话号码格式不正确";
            phoneSpan.style.color = "red";
        }
        return flag;
    }

    // 验证码
    // 创建验证码
    function randomCode() {
        let randomCode = document.getElementById("randomCodeSpan");
        randomCode.innerHTML = Math.floor(Math.random() * 9000) + 1000;
        randomCode.onclick = function () {
            randomCode.innerHTML = Math.floor(Math.random() * 9000) + 1000;
        }
    }

    // 判断用户输入的验证码是否正确
    function checkCode(code) {
        let codeValue = code.value;
        // 拿到随机验证码的值
        let randomValue = document.getElementById("randomCodeSpan").innerHTML;
        let flag = codeValue == randomValue;
        let codeSpan = document.getElementById("codeSpan");
        if (flag) {
            codeSpan.innerHTML = "验证码正确";
            codeSpan.style.color = "green";
        } else {
            codeSpan.innerHTML = "验证码不正确";
            codeSpan.style.color = "red";
        }
        return flag;
    }
</script>
<body>
<div id="bigBox" style="width: 950px; margin: auto">
    <h1 align="left">表单数据验证</h1>
    <table cellpadding="0px" border="1px #d6d6d6 solid" width="950px" align="center">
        <form action="http://www.baidu.com" method="get" name="frm">
            <tr>
                <td>用户名</td>
                <td>
                    <input type="text" name="username" id="userName" placeholder="请输入6-10位的字母：">
                    <span id="usernameSpan"></span>
                </td>
            </tr>
            <tr>
                <td>密码</td>
                <td>
                    <input type="password" name="psd" id="psd" placeholder="请输入6-10位的数字密码：">
                    <span id="psdSpan"></span>
                </td>
            </tr>
            <tr>
                <td>确认密码</td>
                <td>
                    <input type="password" name="rePsd" id="rePsd" placeholder="请再次输入密码确认：">
                    <span id="rePsdSpan"></span>
                </td>
            </tr>
            <tr>
                <td>真实姓名</td>
                <td>
                    <input type="text" name="realName" id="realName" placeholder="请输入2-6位的汉字：">
                    <span id="realNameSpan"></span>
                </td>
            </tr>
            <tr>
                <td>电子邮箱</td>
                <td>
                    <input type="text" name="email" id="email" placeholder="请输入电子邮箱：">
                    <span id="emailSpan"></span>
                </td>
            </tr>
            <tr>
                <td>手机号码</td>
                <td>
                    <input type="text" name="phone" id="phone" placeholder="请输入手机号：">
                    <span id="phoneSpan"></span>
                </td>
            </tr>
            <tr>
                <td>性别</td>
                <td>
                    <input type="radio" name="sex" value="1">男
                    <input type="radio" name="sex" value="0">女
                </td>
            </tr>
            <tr>
                <td>爱好</td>
                <td>
                    <input type="checkbox" name="hobby" value="1">足球
                    <input type="checkbox" name="hobby" value="2">篮球
                    <input type="checkbox" name="hobby" value="3">乒乓球
                    <input type="checkbox" name="hobby" value="4">羽毛球
                </td>
            </tr>
            <tr>
                <td>户籍地址</td>
                <td>
                    <select name="address" id="address">
                        <option value="0">--请选择--</option>
                        <option value="1">武汉</option>
                        <option value="2">广州</option>
                        <option value="3">上海</option>
                        <option value="4">北京</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>个人介绍</td>
                <td>
                    <textarea name="selfInfo" id="info" cols="90" rows="8"></textarea>
                </td>
            </tr>
            <tr>
                <td>验证码</td>
                <td>
                    <input id="code" type="text" name="code" maxlength="4" placeholder="请输入正确的验证码：">
                    <span id="randomCodeSpan"></span>
                    <span id="codeSpan"></span>
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <label>
                        <input type="checkbox" id="isAgree">是否阅读并同意协议
                    </label>
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="submit" id="submitBtn" value="提交">
                    <input type="reset" id="resetBtn" value="重置">
                </td>
            </tr>
        </form>
    </table>
</div>
</body>
</html>